import { connect } from 'react-redux';
import { PureComponent } from 'react'
import * as action from '../../actions/user'
class SettingFrom extends PureComponent {
    changeUserEmail = (ev) => {
        console.log("changeUserEmail");
        console.log(ev.target.value);
        this.props.onEmailChange('email', ev.target.value)
    }

    changeUserName = ev => {
        this.props.onUsernameChange('username', ev.target.value)
    }
    changeAvatar = ev => {
        this.props.onAvatarChange('avatar', ev.target.value)
    }
    changeBio = ev => {
        this.props.onBioChange('bio', ev.target.value)
    }

    changePassword = ev => {
        this.props.onPasswordChange('password', ev.target.value)
    }

    //state 是在组件里
    onSubmitForm = (email, username, password, bio, avatar ) => (ev) => {
        ev.preventDefault()
        //网络接口请求 ： 注册
        let user = { email, username, password , bio, avatar }
        if (!user.password) {
            delete user.password
        }
        this.props.onUpdataUser(user)
    }

    render() {
        const { email, username, password, bio, avatar } = this.props
        console.log(email, username, password, bio, avatar);
        return (
            <form onSubmit={this.onSubmitForm(email, username, password, bio, avatar)}>
                <fieldset className='form-group'>
                    <input
                        className='form-control form-control-lg'
                        type="text"
                        placeholder='用户邮箱'
                        value={email}
                        onChange={this.changeUserEmail}
                    />
                </fieldset>

                <fieldset className='form-group'>
                    <input
                        className='form-control form-control-lg'
                        type="text"
                        placeholder='用户名称'
                        value={username}
                        onChange={this.changeUserName}
                    />
                </fieldset>
                <fieldset className='form-group'>
                    <input
                        className='form-control form-control-lg'
                        type="text"
                        placeholder='用户头像'
                        value={avatar||""}
                        onChange={this.changeAvatar}
                    />
                </fieldset>
                <fieldset className='form-group'>
                    <textarea
                        className='form-control form-control-lg'
                        rows='8'
                        placeholder='用户简介'
                        value={bio||""}
                        onChange={this.changeBio}
                    />

                </fieldset>
                <fieldset className='form-group'>
                    <input
                        className='form-control form-control-lg'
                        type="password"
                        placeholder='用户密码'
                        value={password}
                        onChange={this.changePassword}
                    />
                </fieldset>
                <button
                    className='btn btn-lg btn-primary pull-xs-right'
                    type='submit'
                >
                    提交
                </button>
            </form>
        )
    }

}

const mapState = state => ({
    ...state.user,
})

//行为
const mapDispatch = dispatch => {
    return {
        onEmailChange: (key, value) => dispatch(action.userFieldUpdate(key, value)),
        onUsernameChange: (key, value) => dispatch(action.userFieldUpdate(key, value)),
        onPasswordChange: (key, value) => dispatch(action.userFieldUpdate(key, value)),
        onAvatarChange: (key, value) => dispatch(action.userFieldUpdate(key, value)),
        onBioChange: (key, value) => dispatch(action.userFieldUpdate(key, value)),
        onUpdataUser: (user) => dispatch(action.updataSubmit(user)),
        onUnload: () => dispatch(action.unload()),
        onClickLogout: () => dispatch({})
    }
}
export default connect(mapState, mapDispatch)(SettingFrom)